<template>
  <div class="dashboard-container">
    <!-- 统计卡片区 -->
    <el-row :gutter="20" class="dashboard-cards" v-for="row in 2" :key="row">
      <el-col :span="6" v-for="(item, idx) in stats.slice((row-1)*4, row*4)" :key="idx">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-title">{{item.title}}</div>
          <div class="stat-value">{{item.value}}</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 图表区 -->
    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="16">
        <el-card shadow="hover" style="height: 350px;">
          <div class="chart-title">月度复诊及处方情况</div>
          <div ref="barChart" style="width: 100%; height: 280px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" style="height: 350px;">
          <div class="chart-title">复诊咨询订单状态占比</div>
          <div ref="pieChart" style="width: 100%; height: 280px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- TOP10医生区 -->
    <el-card shadow="hover" class="top10-card">
      <div class="top10-title">TOP10医生</div>
      <div class="doctor-list-flex-fixed">
        <div class="doctor-card doctor-card-final" v-for="(doc, idx) in topDoctors.slice(0, 5)" :key="'row1-' + idx">
          <div class="doctor-info">
            <div class="doctor-name-final">{{doc.name}}</div>
            <div class="doctor-dept-final">{{doc.dept}}</div>
          </div>
          <div class="doctor-finish-final">
            <span class="finish-dot-final"></span>
            <span class="finish-label-final">已完成订单</span>
            <span class="doctor-num-final">{{doc.num}}</span>
          </div>
          <div class="doctor-tags-final">
            <div class="doctor-tag-final"><span class="tag-dot-final total"></span>总订单<b>{{doc.totalOrder}}</b></div>
            <div class="doctor-tag-final"><span class="tag-dot-final recipe"></span>总开方<b>{{doc.totalRecipe}}</b></div>
            <div class="doctor-tag-final"><span class="tag-dot-final invalid"></span>失效单<b>{{doc.invalid}}</b></div>
            <div class="doctor-tag-final"><span class="tag-dot-final patient"></span>服务患者<b>{{doc.patients}}</b></div>
          </div>
        </div>
      </div>
      <div class="doctor-list-flex-fixed">
        <div class="doctor-card doctor-card-final" v-for="(doc, idx) in topDoctors.slice(5, 10)" :key="'row2-' + idx">
          <div class="doctor-info">
            <div class="doctor-name-final">{{doc.name}}</div>
            <div class="doctor-dept-final">{{doc.dept}}</div>
          </div>
          <div class="doctor-finish-final">
            <span class="finish-dot-final"></span>
            <span class="finish-label-final">已完成订单</span>
            <span class="doctor-num-final">{{doc.num}}</span>
          </div>
          <div class="doctor-tags-final">
            <div class="doctor-tag-final"><span class="tag-dot-final total"></span>总订单<b>{{doc.totalOrder}}</b></div>
            <div class="doctor-tag-final"><span class="tag-dot-final recipe"></span>总开方<b>{{doc.totalRecipe}}</b></div>
            <div class="doctor-tag-final"><span class="tag-dot-final invalid"></span>失效单<b>{{doc.invalid}}</b></div>
            <div class="doctor-tag-final"><span class="tag-dot-final patient"></span>服务患者<b>{{doc.patients}}</b></div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      stats: [
        { title: '总复诊', value: 126560 },
        { title: '总处方', value: 126000 },
        { title: '总咨询', value: 6000 },
        { title: '总药房', value: 5900 },
        { title: '总复方', value: 126560 },
        { title: '审方完成', value: 126000 },
        { title: '总药师', value: 6000 },
        { title: '药师完成', value: 5900 },
      ],
      topDoctors: [
        { name: '李富贵', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
        { name: 'XXX', dept: '儿科', num: 116, totalOrder: 126, totalRecipe: 102, invalid: 10, patients: 90 },
      ]
    }
  },
  mounted() {
    this.initBarChart();
    this.initPieChart();
  },
  methods: {
    initBarChart() {
      const barChart = echarts.init(this.$refs.barChart);
      barChart.setOption({
        tooltip: {},
        legend: { data: ['复诊订单', '处方订单'] },
        xAxis: { data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] },
        yAxis: {},
        series: [
          { name: '复诊订单', type: 'bar', data: [200, 400, 300, 250, 300, 350, 400, 600, 500, 300, 250, 320] },
          { name: '处方订单', type: 'bar', data: [150, 300, 200, 200, 250, 300, 350, 500, 400, 250, 200, 300] }
        ]
      });
    },
    initPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);
      pieChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
            labelLine: { show: false },
            data: [
              { value: 730, name: '进行中' },
              { value: 737, name: '已完成' },
              { value: 151, name: '已失效' },
              { value: 554, name: '待接诊' }
            ]
          }
        ]
      });
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background: #f5f6fa;
}
.dashboard-cards {
  margin-bottom: 20px;
}
.stat-card {
  text-align: center;
  padding: 20px 0;
}
.stat-title {
  font-size: 16px;
  color: #888;
  margin-bottom: 10px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #222;
}
.dashboard-charts {
  margin-bottom: 20px;
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.top10-card {
  margin-top: 20px;
}
.top10-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.doctor-list-flex-fixed {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px 24px;
  max-width: calc(5 * 290px + 4 * 24px);
  margin: 0 auto 10px auto;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
}
.doctor-card-final {
  width: 290px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 18px 18px 10px 18px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  margin-bottom: 0;
  transition: box-shadow 0.2s;
}
.doctor-card-final:hover {
  box-shadow: 0 4px 16px rgba(64,158,255,0.15);
}
.doctor-info {
  text-align: left;
  margin-bottom: 2px;
}
.doctor-name-final {
  font-weight: bold;
  font-size: 18px;
  color: #222;
  margin-bottom: 2px;
}
.doctor-dept-final {
  color: #888;
  font-size: 15px;
  margin-bottom: 2px;
}
.doctor-finish-final {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 2px;
}
.finish-dot-final {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #67c23a;
  border-radius: 50%;
  margin-right: 4px;
}
.finish-label-final {
  color: #67c23a;
  font-size: 15px;
  margin-right: 8px;
}
.doctor-num-final {
  font-size: 22px;
  color: #409EFF;
  font-weight: bold;
  margin-left: 8px;
}
.doctor-tags-final {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
}
.doctor-tag-final {
  font-size: 14px;
  color: #888;
  width: 50%;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
.tag-dot-final {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}
.tag-dot-final.total { background: #409EFF; }
.tag-dot-final.recipe { background: #e6a23c; }
.tag-dot-final.invalid { background: #f56c6c; }
.tag-dot-final.patient { background: #13c2c2; }
</style>
